<template>
  <div class="new-music">
    <div class="nav">
      <div class="all" @click="handleType(0)">全部</div>
      <div @click="handleType(7)">华语</div>
      <div @click="handleType(96)">欧美</div>
      <div @click="handleType(8)">日本</div>
      <div @click="handleType(16)">韩国</div>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in newPlayList" :key="index" @click="handlePlay(item)">
        <div class="index">{{ myIndex(index) }}</div>
        <div class="image bigger">
          <img :src="item.album.blurPicUrl" alt="" />
        </div>
        <div class="name">
          <span>{{ item.name }}</span>
        </div>
        <div class="singer">{{ singers(item.artists) }}</div>
        <div class="album">{{ item.album.name }}</div>
        <div class="time">03:30</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, computed } from 'vue'
import {useMusicStore} from '@/store/music.js'
const { proxy } = getCurrentInstance()
const musicStore=useMusicStore()
// 序号
let myIndex = (val) => {
  val++
  if (val < 10) {
    return '0' + val
  }
  return val
}
// 歌手们
let singers = (val) => {
  return val.map((item) => item.name).join('/')
}

// 获取新歌速递数据
let newPlayList = ref([])
let getNewMusicList = async (type) => {
  let { data } = await proxy.$api.getNewMusicList({ type })
  newPlayList.value = data
}
let handleType = (val) => {
  getNewMusicList(val)
}

let handlePlay=async(item)=>{
  let {data}=await proxy.$api.getMusicUrl({id:item.id})
  let {songs}=await proxy.$api.getSongListDetail({ids:item.id})
  musicStore.saveCurPlayMusicUrl(data[0].url)
  musicStore.saveCurMusicInfo(songs[0])
  musicStore.setIsPlay(true)
}
onMounted(async () => {
  await getNewMusicList()
})
</script>

<style lang="scss">
.new-music {
  height: 100%;
  width: 100%;
  .nav {
    margin-top: 20px;
    display: flex;
    height: 30px;
    .all {
      font-weight: 900;
    }
    div {
      margin-right: 20px;
      font-size: 14px;
    }
    div:hover {
      color: #02b402;
    }
  }
  .list {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    .item {
      height: 80px;
      display: flex;
      align-items: center;
      .index {
        width: 50px;
        text-align: center;
        margin-left: 10px;
      }
      .image {
        width: 55px;
        height: 55px;
        img {
          border-radius: 4px;
          width: 55px;
          height: 55px;
        }
      }
      .name {
        width: 500px;
        margin-left: 10px;
      }
      .singer {
        width: 300px;
      }
      .album {
        width: 400px;
        text-align: center;
      }
      .time {
        flex: 1;
        text-align: center;
      }
    }
  }
}
.item:hover {
  background-color: #f1f2f3;
}
</style>
